<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .c1>.c2 {
            border-top: 2px solid red;
        }

        ul>li {
            border-top: 2px solid red;
        }
    </style>
</head>

<body>

    <!-- 关系选择器 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators -->

    <!-- 子代关系选择器 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%E5%AD%90%E4%BB%A3%E5%85%B3%E7%B3%BB%E9%80%89%E6%8B%A9%E5%99%A8 -->
    <!-- 子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。 -->
    <!-- 子选择器 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/Child_combinator -->
    <!-- 当使用  > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素. 与之相比, 当两个元素由 后代选择器 相连时, 它表示匹配存在的所有由第一个元素作为祖先元素(但不一定是父元素)的第二个元素, 无论它在 DOM 中"跳跃" 多少次. -->


    <ul>
        <li>Unordered item</li>
        <li>Unordered item
            <ol>
                <li>Item 1</li>
                <li>Item 2</li>
            </ol>
        </li>
    </ul>

    <hr>

    <div class="c1">
        Hello
        <div class="c2">
            World
            <div class="c3">
            </div>
        </div>
    </div>



</body>

</html>